<template>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :router="true"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="/">首页(组卷)</el-menu-item>
      <el-menu-item index="/automaticGroup">智能组卷</el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="/NCEEdetailPoint">选考细目表</el-menu-item>
      <el-menu-item index="/TestPaper">联考试卷</el-menu-item>
      <el-sub-menu index="/addquestion">
        <template #title>录入题目</template>
        <el-menu-item index="/addQuestion"><router-link :to="{ path:'/addQuestion',}">录入单题</router-link></el-menu-item>
        <el-menu-item index="/addQuestions"><router-link :to="{ path:'/addQuestions',}">录入多题</router-link></el-menu-item>
        <el-menu-item index="/importQuestions">导入题目</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/user-infor">
        <template #title>我</template>
        <el-menu-item index="/basic-infor">基本资料</el-menu-item>
        <el-menu-item index="/changepassword">修改密码</el-menu-item>
        <el-menu-item index="/signout">退出登陆</el-menu-item>
        <el-menu-item index="/feedback">反馈意见</el-menu-item>
        <el-sub-menu index="3-4">
          <template #title>我的题目</template>
          <el-menu-item index="3-4-1">我收藏的</el-menu-item>
          <el-menu-item index="3-4-2">我录入的</el-menu-item>
          <el-menu-item index="3-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
    </el-menu>
  </template>
  <script lang="ts" setup>
  import { ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  const route = useRoute()
  const router = useRouter()
  const activeIndex = ref('1')
  const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  </script>
  <style>
  .flex-grow {
    flex-grow: 1;
  }
  </style>